<template>
	<section>
		<!--start 面包屑-->
		<div class="location">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
				<el-breadcrumb-item>营销</el-breadcrumb-item>
				<el-breadcrumb-item>广告发布</el-breadcrumb-item>
				<el-breadcrumb-item>广告新增</el-breadcrumb-item>
			</el-breadcrumb>
			<!--start 右侧帮助组件    可选！！-->
			<help-components>
				<span slot="headText">广告新增</span>
				<p slot="headDescText"></p>
				<div slot="helpContentWrap">
					<div>
						<h3>如何新增广告？</h3>
						<p>
							 ①填写广告标题，最多不得大于8个字符；<br>
							 ②选择广告链接地址，可以选择链接至商品详情、商品分类、商品品牌、商品标签，通知详情，促销详情；<br>
							 ③上传广告图片，支持格式jpg,jpeg,png,bmp，文件小于2M，广告图片尺寸建议720*288像素。<br>
						</p>
					</div>
				</div>
			</help-components>
			<!--end 右侧帮助组件-->
		</div>
		<!--end 面包屑-->
		<!--start content-->
		<div class="wrap" ref="companyWrap">
			<el-form :model="formData" :rules="rules" ref="form" label-width="100px" class="formFontSizeMini scroll">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="广告标题" prop="advListTitile">
							<el-input v-model="formData.advListTitile" placeholder="请输入广告标题"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="链接地址">
							<el-input v-model="formData.advListUrl" placeholder="请输入广告页面链接"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="14">
						<el-form-item label="广告图片">
							<el-upload
							  class="avatar-uploader"
							  :action="vue_uploadUrl"
							  :show-file-list="false"
							  :data="vue_logoLoad.uploadData"
							  :on-success="handleLogoSuccess"
							  :on-error="handleLogoError"
							  :on-remove="handleRemove"
							  :before-upload="beforeLogoUpload">
							  <img v-if="vue_logoLoad.ImgShow" :src="formData.advListPicurl" class="avatar" height="95" width="auto">
							  <i v-else class="avatar-uploader-icon" :class="{'el-icon-plus':!vue_logoLoad.uploading,'el-icon-loading':vue_logoLoad.uploading}"></i>
							</el-upload>
							<span>仅支持jpg,jpeg,png,bmp格式，文件小于2M，广告图片尺寸720*288像素</span>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<div class="btnBox_180" :class="{btnBox_98:!$store.state.headFold}">
			<el-button type="primary" :disabled="clickBtn" @click="save">保存</el-button>
			<el-button @click="cancelFn">取消</el-button>
		</div>
		<!--end content-->
	</section>
</template>

<script>
	import * as companyMsgDatas from '../../../assets/data/companyMsgData';  //引入地区数据
	import helpComponents from '../../../components/help/help'    //引入右侧帮助组件 可选！！
	export default {
		components:{helpComponents},
		data() {
			return {
				clickBtn:false,                 //请求数据后禁用按钮
				//form的数据
				formData:{
					advListTitile:"",  //广告标题
					advListUrl:"",  //链接地址
					advListPicurl:"",  //广告图片
				},
				//form控件的校验,注意，rules的校验属性名要跟控件上绑定的变量名一致，并且两者不能属于同个对象下，如a.formData和a.rules!!
				rules: {
					advListTitile: [{required: true,message: '广告标题不能为空',trigger: 'blur'}],  //广告标题非空校验
				},
				//上传
				vue_uploadUrl:"/v3/misc/common/uploadFile",
				vue_logoLoad:{
					uploadData:{
						"moduleName":"portal",
						"fromTable":"PortalAdvList",
						"fileName":"",
						"fromCode":""						
					},
					uploading:false,
					ImgShow:false,
				},
			}
		},
		methods: {
			// uploadLOGO
			beforeLogoUpload(file) {
				this.vue_logoLoad.uploading = true;
		      	this.vue_logoLoad.ImgShow = false;
		      	this.vue_logoLoad.uploadData.fileName = file.name;

				const isJPG = file.type === 'image/jpeg';
		        const isPNG = file.type === 'image/png';
		        const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isJPG&&!isPNG) {
					this.vue_logoLoad.uploading = false;
			      	this.canUpload = true;
		        	this.Public.openError(this,"上传头像图片只能是 JPG和PNG 格式!")
		        }
				if(!isLt2M) {
					this.vue_logoLoad.uploading = false;
			      	this.canUpload = true;
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return (isPNG || isJPG) && isLt2M;
			},
			handleLogoSuccess(res, file , fileList) {
				this.vue_logoLoad.uploading = false;
		      	this.vue_logoLoad.ImgShow = true;
				this.formData.advListPicurl +=res;
			},
			handleLogoError(err, file , fileList){
				this.vue_logoLoad.uploading = false;
		      	this.vue_logoLoad.ImgShow = !!this.formData.advListPicurl;
		      	this.Public.openError(this,"LOGO上传失败");
			},
			handleRemove(file,fileList){
 				this.axios({
					method:"DELETE",
					url:"/v3/basic/files/delete",
					data:{
						"fromTable":"PortalAdvList",
						"fromCode":this.vue_logoLoad.uploadData.fromCode,
						"fileUrl":file.response||file.fileUrl
					}
				}).then((res)=>{
					this.Public.openSuccess(this,"操作成功！");
				}).catch((err)=>{
					this.Public.openError(this,err.response.data);
				}) 				
			},
			save(){
				this.clickBtn=!this.clickBtn;	
				this.axios({
					method:"POST",
					url:"/v3/portal/advLists",
					data:{
						"advListTitile":this.formData.advListTitile,
						"advListUrl":this.formData.advListUrl,
						"advListPicurl":this.formData.advListPicurl,
					}
				}).then((res)=>{
					this.clickBtn=!this.clickBtn;	
					this.Public.openSuccess(this,"操作成功！");
					this.$router.push({path:'/goodsPrule/portalAdvListList'})
				}).catch((err)=>{
					this.clickBtn=!this.clickBtn;	
					this.Public.openError(this,err.response.data)
				})
			},
			cancelFn() {
				this.$router.go(-1)
			},
		},
		created() {

		},
		mounted() {
			this.$refs['form'].$el.style.height = (document.documentElement.clientHeight - 175) + 'px';

		}
	}
</script>

<style scoped>
	*{transition:.2s;}
	section {display: flex;flex-direction: column;flex: 1;}
	div.location {flex: 0 0 10px; padding: 3px 0 15px 0;}
	div.wrap {flex: 1;width: 100%;padding: 35px 20px 0 20px;box-sizing: border-box;background: #fff;}
	.scroll {overflow-y: auto;overflow-x: hidden;padding-right: 10px;}
	.title {height: 50px;color: #03B8CC;font-size: 16px;}
	.selectWidth {width: 100%;}
	.btnBox_180 {position: absolute;bottom: 10px;left:180px;height: 50px;background: #fff;z-index: 100;}
	.btnBox_98 {left:98px;}
	/* start upload */
	.avatar-uploader {position: relative;width:720px;height:288px;line-height:288px;text-align:center;border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;overflow: hidden;z-index: 9;}
	.avatar-uploader:hover {border-color: #03B8CC;}
	.avatar-uploader-icon {font-size: 20px;color: #8c939d;width: 95px;height: 95px;line-height: 95px;text-align: center;}
	.certificate {width:372px;}
	/* end upload */
	.intensitySpan{display: inline-block;width: 120px; height: 20px;line-height: 20px;text-align: center!important;background: #e9ecf3;color: #fff;margin-right: 3px!important;font-size: 13px;}
</style>
